<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>GrapesJS</title>

    <script src="./web/grapes-plus/grapes-plus.js"></script>

    <style type="">
      #outGrapesWrap {
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 2px solid #ccc;
      }
    </style>
  </head>

  <body>
    <button onclick="sendData()">发布数据</button>
    <button onclick="loadDataAndRender()">加载数据</button>
    <div id="outGrapesWrap"></div>

    <script type="text/javascript">
      //----实例
      const outGrapesjs = new OutGrapesjs();
      outGrapesjs.init({
        container: "#outGrapesWrap",
        onInitFinish: () => {
          //界面初始化完成
          console.log("onInitFinish...");
        },
      });

      outGrapesjs.addInitFinishEvent(() => {
        console.log("outGrapesjs Init Finish");
      });

      //保存数据
      function sendData() {
        //await的方法需要放在异步方法里面处理
        (async function () {
          console.log("发布数据");
          var currData = await outGrapesjs.genProjectData();
          var currDataStr = JSON.stringify(currData);
          console.log(currDataStr);
          localStorage.setItem("projectData2", currDataStr);
        })();
      }

      //加载保存的数据
      function loadDataAndRender() {
        console.log("加载数据");
        var orgDataStr = localStorage.getItem("projectData2");
        console.log(orgDataStr);
        var orgData = orgDataStr ? JSON.parse(orgDataStr) : null;
        outGrapesjs.setProjectData(orgData);
      }
    </script>
  </body>
</html>
